<h1>Transaksi</h1>
<div id="grafik" style="height: 300px;background: white;border-radius: 5px;"></div>
<div id="div_left" style="float: left;background: white;width: 460px;height: 150px;margin-top: 20px;border-radius: 5px;color: black;">
    <h2 style="padding: 0;margin: 0;padding: 10px;">Stok Minimal</h2>
    <table class="style">
        <th>Kode Barang</th>
        <th>Nama Barang</th>
        <th>Qty Akhir</th>
        <?php
        foreach ($stok_limit as $row) {
            ?>
            <tr>
                <td><?= $row->kodebarang; ?></td>
                <td><?= $row->namabarang; ?></td>
                <td><?= $row->qtyakhir; ?></td>
            </tr>
            <?php
        }
        ?>
    </table>
</div>
<div id="div_right" style="float: right;background: white;width: 460px;height: 150px;margin-top: 20px;border-radius: 5px;color: black;">
    <h2 style="padding: 0;margin: 0;padding: 10px;">Stok Minimal</h2>
</div>
<div class="clear"></div>
<script type="text/javascript">
    var chart = null,options=null;
    var chartBarang = null, optionsBarang = null;
    $('#nama_retail').html('Retail &raquo; '+'<?= $name; ?>');
    $(document).ready(function(){
        
        options ={
            chart: {
                renderTo: 'grafik',
                type: 'column'
            },
            title: {
                text: 'Grafik Penjualan '+<?= $tahun ?>
            },
            subtitle: {
                text: '<?= $name; ?>'
            },
            xAxis: {
                categories: [<?= $bulan; ?>],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rupiah Penjualan'
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y ;
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                    name: 'All Retail',
                    data: [<?= $total; ?>]
    
                }]
        }
        chart = new Highcharts.Chart(options);
        
        optionsBarang ={
            chart: {
                renderTo: 'div_right',
                type: 'column'
            },
            title: {
                text: 'Grafik Penjualan Barang'
            },
            subtitle: {
                text: '<?= $name; ?>'
            },
            xAxis: {
                categories: ['<?= $bulan_barang; ?>']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total Penjualan'
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y ;
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: <?= $array_barang; ?>
        }
        chartBarang = new Highcharts.Chart(optionsBarang);
    });
</script>